
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { BookOpen, Users, ArrowRight } from "lucide-react";

export const SubjectTeachingCommunities = () => {
  const communities = [
    { name: "STEM Educators Network", members: 342, category: "Science & Math", latest: "2 hours ago", description: "Innovative STEM teaching methods and interdisciplinary approaches" },
    { name: "Language Arts Collective", members: 198, category: "English & Literature", latest: "1 hour ago", description: "Creative writing, reading comprehension, and literacy strategies" },
    { name: "Social Studies Hub", members: 156, category: "History & Civics", latest: "3 hours ago", description: "Engaging students with history, geography, and civic education" },
    { name: "Arts Integration Circle", members: 89, category: "Creative Arts", latest: "45 minutes ago", description: "Integrating visual and performing arts across the curriculum" },
  ];

  return (
    <Card className="bg-white dark:bg-gray-800 shadow-sm border">
      <CardHeader>
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg font-semibold flex items-center gap-2">
            <BookOpen className="w-5 h-5 text-blue-600" />
            📘 Subject Teaching Communities
          </CardTitle>
          <Button variant="ghost" size="sm" className="text-blue-600 hover:text-blue-700">
            Explore All <ArrowRight className="w-4 h-4 ml-1" />
          </Button>
        </div>
        <p className="text-sm text-gray-600 dark:text-gray-400">
          Focused on discipline-specific teaching methods and resource exchange
        </p>
      </CardHeader>
      <CardContent>
        <div className="grid gap-4">
          {communities.map((community, index) => (
            <div key={index} className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors cursor-pointer">
              <div className="flex items-center space-x-4">
                <Avatar>
                  <AvatarFallback>
                    <BookOpen className="w-4 h-4" />
                  </AvatarFallback>
                </Avatar>
                <div>
                  <h4 className="font-semibold text-gray-900 dark:text-gray-100">{community.name}</h4>
                  <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">{community.description}</p>
                  <p className="text-xs text-gray-400">
                    {community.members} members • Latest: {community.latest}
                  </p>
                </div>
              </div>
              <Button size="sm" variant="outline">
                <Users className="w-4 h-4 mr-1" />
                Join
              </Button>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};
